<template>
  <div class="footer">
       <ul>
           <li><router-link to="index">首页</router-link></li>
           <li><router-link to="register">预约</router-link></li>
           <li><router-link to="discovery">发现</router-link></li>
           <li><router-link to="center">我的</router-link></li>
       </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.footer
{
    width:100%;
    overflow:hidden;
    position:fixed;
    left:0;
    bottom:0;
    background:#fff;
    border-top:1px solid #ccc;
    z-index: 100;
    ul
    {
        li
        {
            width:25%;
            text-align:center;
            float:left;
            line-height:1rem;
            height:1rem;
            a
            {
                &.router-link-active
                {
                    color:#078def;
                }
            }
        }
    }
}
</style>
